<template>
	<div class="file_module">
		<div class="inp_file">
			<input class="file_hid" name="fileSource" id="file_all" type="file" accept="video/*" />
			<div class="file_operate">
				<label class="label_file" for="file_all">{{ fileInfos.files.value == '' ? '添加文件' : '更換文件' }}</label>
				<label class="label_cancel" id="label_cancel" :class="fileInfos.files.value == '' ? 'file_hid' : ''">{{ fileInfos.files.value == '' ? '' : '取消上传' }}</label>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, toRefs } from 'vue';
let prop = defineProps(['fileInfos']);
let fileInfos = toRefs(prop['fileInfos']);

function fileChange(e) {
	console.log(e);
	fileInfos.files.value = e.target.files[0].name;
}
function fileCancel() {
	//清空 filelist
	let fileAllEl = document.getElementById('file_all');
	fileAllEl.value = "";
	
	//置空 file 文件
	fileInfos.files.value = '';
}
// console.log(fileInfos.files);
onMounted(() => {
	let fileAllEl = document.getElementById('file_all');
	fileAllEl.addEventListener('change', fileChange);
	let fileCancelEl = document.getElementById('label_cancel');
	fileCancelEl.addEventListener('click', fileCancel);
});
</script>

<style lang="scss" scoped>
.file_hid {
	display: none;
}
.file_operate {
	width: 50%;
	display: flex;
	justify-content: space-around;
}
.label_file,
.label_cancel {
	cursor: pointer;
}
</style>
<style></style>
